<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" placeholder="请输入你的姓名" v-model.trim="username" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" placeholder="请输入你的年龄" v-model.number="userage" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="usergender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="increase">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr class="form" v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>
            <button @click="allDelete(item.id)">删除</button>
            <button @click="edit(item)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: '1',
          name: 'ikun',
          age: 18,
          gender: '男',
        },
        {
          id: '2',
          name: '张三',
          age: 44,
          gender: '男',
        },
      ],
      useid : '',
      username: '',
      userage: '',
      usergender: '',
      form: {
        id: '',
        name: '',
        age: '',
        gender: '男',
      }
    }
  },
  methods: {
    // 添加功能
    increase() {
      // 判断
      if(this.useid !== '') {
        // console.log(this.useid);
        // console.log(this.list);
        this.list.filter((item) => {
          if(item.id === this.useid) {
            item.id = this.useid
            item.name = this.username
            item.age = this.userage
            item.gender = this.usergender

          }
        })
      } else if(this.username && this.userage && this.usergender) {
        if(this.userage > 0 && this.userage < 150) {
          const obj = {
            name: this.username,
            age: this.userage,
            gender: this.usergender,
            id: +this.list[this.list.length - 1]?.id + 1 || 1,
          }

          
          this.list = [...this.list, obj]
          
          
          // // 添加完后清空输入框
          // this.username = ''
          // this.userage = ''
          // this.usergender = ''
        }
      } else {
        alert ('请输入正确的姓名和年龄')
      }

      // 添加完后清空输入框
        this.useid = ''
        this.username = ''
        this.userage = ''
        this.usergender = ''
    },

    // 删除功能
    allDelete(id) {
      // console.log(id);
      this.list = this.list.filter((item) => item.id !== id)
    },

    // 编辑功能
    edit(i) {
      // console.log(this.list);
      // console.log(i.id);
      this.useid = i.id
      this.username = i.name
      this.userage = i.age
      this.usergender = i.gender
      console.log(this.useid);
    },
  },

  computed: {},
}
</script>